<template>
	<coreshop-page title="服务列表" mode="left">
		<view class="layout-service-box" v-if="state.servicesList.length > 0">
			<view class="item-box" v-for="item in state.servicesList" :key="item.id"
				@click="handleRouteNavigateTo(`/pages/subpackage/member/serviceOrder/detail/detail?id=${item.serviceOrderId}`)">
				<view class="order-num">
					<view class="num">
						订单号：{{item.serviceOrderId}}
					</view>
					<view class="order-status">
						{{item.statusStr}}
					</view>
				</view>
				<view class="goods-box">
					<coreshop-goods-card type="horizontal" imgHeight="140rpx" imgWidth="140rpx"
						:goodsData="hanldeCombinationGoodsData(item.service)">
						<template #goodPrice>
							<view class="time-box">
								下单时间：{{item.payTime}}
							</view>
						</template>
					</coreshop-goods-card>
				</view>
				<view class="btn-box">
					<uv-tags :text="item.statusStr" type="success" plain size="mini"></uv-tags>
					<view class="btn">查看详情</view>
				</view>
			</view>
			<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
		</view>
		<view v-else class="layout-empty-box">
			<coreshop-empty :mode="EmptyEnum.data" text="暂无数据"></coreshop-empty>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import { queryServicesPageList } from '@/core/api';
	import type { Response } from '@/core/models';
	import { EmptyEnum } from '@/core/enum';
	import { handleShowToast, handleRouteNavigateTo } from '@/core/utils';

	const state = reactive<{
		page : number;
		limit : number;
		totalPages : number;
		servicesList : Array<any>;
	}>({
		page: 1,
		limit: 10,
		totalPages: 1,
		servicesList: [],
	});

	onLoad(() => {
		getServicesPageList();
	});

	onReachBottom(() => {
		if (state.totalPages > state.page) {
			state.page++;
			getServicesPageList();
		}
	});

	/** 获取购买的服务列表 */
	const getServicesPageList = async () => {
		uni.showLoading({
			title: "加载中..."
		})
		const servicesList : Response<any> = await queryServicesPageList({
			page: state.page,
			limit: state.limit,
		});

		if (servicesList.status) {
			uni.hideLoading();
			state.totalPages = Math.ceil(servicesList.data?.count / state.limit);
			state.servicesList = state.servicesList.concat(servicesList.data?.list);
		} else {
			uni.hideLoading();
			handleShowToast(servicesList.msg)
		}
	}

	/** 组合商品数据传入组件 */
	const hanldeCombinationGoodsData = (item : any) => {
		return {
			id: item.id,
			image: item.thumbnail,
			name: item.title,
			brief: item.description,
		}
	}
</script>
<style lang="scss" scoped>
	@import './list.scss';
</style>